<template>
  <!-- <el-carousel class="banner" height="500px" :autoplay="false" trigger="click">
    <el-carousel-item v-for="(item, index) in bannerList" :key="index">
      <edu-image fit="cover" :src="item"></edu-image>
    </el-carousel-item>
  </el-carousel> -->
  <swiper class="banner" :options="swiperOption">
    <swiper-slide v-for="(item, index) in bannerList" :key="index" @click.native="path(item)">
      <edu-image fit="cover" :src="item.image_url"></edu-image>
    </swiper-slide>
    <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  props: {
    bannerList: {
      type: Array
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {
        // loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  methods: {
    path(item) {
      if (item.link_type == 1) {
        this.$router.push({
          path: `/course/${item.link_data_id}`
        })
      } else if (item.link_type == 2) {
        window.open(item.link_href, '_blank')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  .swiper-slide {
    padding-top: 500px;
    .el-image {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .swiper-pagination {
    .swiper-pagination-bullet {
      opacity: 0.48;
      border-radius: 4px;
      background: #fff;
    }
    .swiper-pagination-bullet-active {
      width: 26px;
      opacity: 1;
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    outline: none;
    width: calc(26px / 44 * 27);
    height: 26px;
    margin-top: calc(-1 * 26px / 2);
    &:after {
      font-size: 18px;
    }
  }
  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled {
    pointer-events: auto;
  }
}
</style>
